<template>
	<view class="flex-c" :class="[{disabled}]">
	  <view class="m-r10 shrink-0 checkicon" :class="[{ checked }]" @click="toggle" />
	  <slot />
	</view>
</template>

<script lang="ts" setup>
	import { computed, defineEmits, defineProps } from 'vue'
	
	const props = defineProps<{
		modelValue?: boolean;
		disabled?: boolean;
	}>()
	
	const emit = defineEmits<{
		(e: 'update:modelValue', value: boolean): void;
	}>()
	
	const checked = computed({
		get: () => {
			return props.modelValue
		},
		set: (val: boolean) => {
			if (props.disabled) return
			
			if (val !== props.modelValue) {
				emit('update:modelValue', val)
			}
		}
	})
	
	const toggle = () => {
		if (props.disabled) return
		checked.value = !checked.value
	}
</script>

<style lang="scss" scoped>
	.checkicon {
		position: relative;
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		border: 2rpx solid $border-color-4;
		&.checked {
			border-color: $border-color-1;
			background-color: $bg-color-2;
			&::after {
				content: '';
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 22rpx;
				height: 15px;
				background: url(@/static/images/user/select.png) no-repeat center;
				background-size: contain;
			}
		}
	}
</style>